<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>

<head>
    <base href="/oa1/" />
    <title>襄阳蓝芯智能化办公系统 - 角色管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
    <link href="static/bootstrapvalidator/css/bootstrapValidator.css" rel="stylesheet">
    <style>
        .thead-blue {
            color: #fff;
            font-weight: bold;
            background-color: #337ab7;
        }
        .pagination-btn {
            margin: 0 2px;
        }
    </style>
    <script src="static/jquery/jquery-1.10.2.min.js"></script>
    <script src="static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="static/bootstrapvalidator/js/bootstrapValidator.js"></script>
</head>
<body>

<!-- 搜索区域 -->
<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">角色搜索</h4>
    </div>
    <div class="panel-body">
        <form action="qx/role/listRole" id="searchForm" method="post" class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-md-12">
                    <label for="roleName" class="col-md-2 control-label">角色名称</label>
                    <div class="col-md-4">
                        <input type="hidden" name="page" id="page" value="1">
                        <input type="hidden" name="pageSize" id="pageSize" value="5">
                        <input type="text" name="roleName" class="form-control"
                               placeholder="请输入角色名称" id="roleName" value="${searchRoleName}">
                    </div>
                    <div class="col-md-6">
                        <button type="button" onclick="searchBtn()" class="btn btn-success">搜索</button>
                        <button onclick="editRole(0)" class="btn btn-info" type="button">添加</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 列表区域 -->
<div class="panel panel-primary">
    <table class="table table-bordered table-hover">
        <thead>
        <tr class="thead-blue" align="center">
            <td>角色名称</td>
            <td>角色描述</td>
            <td>角色用户</td>
            <td>角色权限</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${pageInfo.records}" var="role">
            <tr align="center">
                <td>${role.roleName}</td>
                <td>${role.description}</td>
                <td><a href="qx/role/toEditRoleEmp?roleId=${role.oid}">设置角色用户</a></td>
                <td><a href="qx/role/toEditRoleFun?oid=${role.oid}">设置角色权限</a></td>
                <td>
                    <a type="button" href="javascript:editRole('${role.oid}','${role.roleName}', '${role.description}')"
                       class="btn btn-warning btn-xs">修改</a>
                    <button type="button" onclick="deleteRole(${role.oid})"
                            class="btn btn-danger btn-xs" data-toggle="modal" data-target="#confirmModal">删除</button>
                </td>
            </tr>
        </c:forEach>
        <c:if test="${empty pageInfo.records}">
            <tr align="center">
                <td colspan="5">暂无角色数据</td>
            </tr>
        </c:if>
        </tbody>
    </table>
</div>

<!-- 分页控件 -->
<div class="input-group col-md-8 col-md-offset-2">
    <div class="row">
        <div class="btn-group">
            <button onclick="gotoPage(1, ${pageInfo.size})"
                    class="btn btn-primary pagination-btn ${pageInfo.current == 1 ? 'disabled' : ''}"
                    type="button">首页</button>

            <button onclick="gotoPage(${pageInfo.current - 1}, ${pageInfo.size})"
                    class="btn btn-primary pagination-btn ${pageInfo.current == 1 ? 'disabled' : ''}"
                    type="button">上一页</button>

            <button class="btn btn-primary pagination-btn disabled"
                    type="button">当前第${pageInfo.current}/${pageInfo.pages}页</button>

            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    每页显示${pageInfo.size}条 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="javascript:gotoPage(1,5)">每页显示5条</a></li>
                    <li><a href="javascript:gotoPage(1,10)">每页显示10条</a></li>
                    <li><a href="javascript:gotoPage(1,15)">每页显示15条</a></li>
                    <li><a href="javascript:gotoPage(1,20)">每页显示20条</a></li>
                </ul>
            </div>

            <button class="btn btn-primary pagination-btn disabled"
                    type="button">共${pageInfo.total}条记录</button>

            <button onclick="gotoPage(${pageInfo.current + 1}, ${pageInfo.size})"
                    class="btn btn-primary pagination-btn ${pageInfo.current == pageInfo.pages ? 'disabled' : ''}"
                    type="button">下一页</button>

            <button onclick="gotoPage(${pageInfo.pages}, ${pageInfo.size})"
                    class="btn btn-primary pagination-btn ${pageInfo.current == pageInfo.pages ? 'disabled' : ''}"
                    type="button">尾页</button>
        </div>
    </div>
</div>

<br><br><br>

<!-- 编辑/新增模态框 -->
<div class="modal fade" id="editRoleModal" tabindex="-1" role="dialog"
     aria-labelledby="editRoleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="editRoleModalLabel">编辑角色信息</h4>
            </div>
            <form class="form-horizontal" role="form" id="editRoleForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="editRoleName" class="col-md-2 control-label">角色名称</label>
                            <div class="col-md-10">
                                <input type="hidden" name="oid" id="editOid">
                                <input type="text" id="editRoleName" name="roleName" class="form-control"
                                       placeholder="请输入角色名称" value="">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="editDescription" class="col-md-2 control-label">角色描述</label>
                            <div class="col-md-10">
                                <input type="text" id="editDescription" name="description"
                                       class="form-control" placeholder="请输入角色描述" value="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="sub" onclick="subEditRole()" class="btn btn-primary">确认提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="confirmModalLabel">提示</h4>
            </div>
            <div class="modal-body">确认删除吗？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="subconfirm" class="btn btn-primary">提交更改</button>
            </div>
        </div>
    </div>
</div>

<!-- 提示信息模态框 -->
<div class="modal fade" id="alertMsgModal" tabindex="-1" role="dialog" aria-labelledby="alertMsgModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="alertMsgModalLabel">提示</h4>
            </div>
            <div class="modal-body" id="alertmsg"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 全局变量存储当前要删除的ID
    var deleteOid;

    // 页面加载完成后初始化
    $(document).ready(function(){
        // 绑定删除确认事件
        $("#subconfirm").click(function(){
            deleteConfirm();
            $('#confirmModal').modal('hide');
        });

        // 初始化表单验证
        bindValidation();
    });

    // 分页跳转
    function gotoPage(page, pageSize){
        $("#page").val(page);
        $("#pageSize").val(pageSize);
        $("#searchForm").submit();
    }

    // 搜索提交
    function searchBtn(){
        $("#page").val(1);
        $("#searchForm").submit();
    }

    // 标记要删除的ID
    function deleteRole(oid){
        deleteOid = oid;
    }

    // 执行删除操作
    function deleteConfirm(){
        $.get("qx/role/deleteQxRole", {"oid": deleteOid}, function(result){
            if(result){
                // 删除成功刷新页面
                window.location.href = "qx/role/listRole";
            }else{
                $("#alertmsg").text("删除失败，当前角色下有员工或关联权限！");
                $('#alertMsgModal').modal('show');
            }
        });
    }

    // 打开编辑/新增模态框
    function editRole(oid, roleName, description){
        $('#editRoleModal').modal('show');
        if(oid === 0){
            // 新增场景
            $("#editRoleModalLabel").text("新增角色信息");
            $("#editOid").val("");
            $("#editRoleName").val("");
            $("#editDescription").val("");
        }else{
            // 编辑场景
            $("#editRoleModalLabel").text("编辑角色信息");
            $("#editOid").val(oid);
            $("#editRoleName").val(roleName);
            $("#editDescription").val(description);
        }
    }

    // 提交编辑/新增表单
    function subEditRole(){
        $('#editRoleForm').data("bootstrapValidator").validate();
        if($('#editRoleForm').data("bootstrapValidator").isValid()){
            var url = $("#editOid").val() ? "qx/role/updateQxRole" : "qx/role/addQxRole";
            $.post(url, {
                "oid": $("#editOid").val(),
                "roleName": $("#editRoleName").val(),
                "description": $("#editDescription").val()
            }, function(result){
                if(result){
                    window.location.href = "qx/role/listRole";
                }else{
                    $("#alertmsg").text("操作失败，请稍后重试！");
                    $('#alertMsgModal').modal('show');
                }
                $('#editRoleModal').modal('hide');
            });
        }
    }

    // 绑定表单验证
    function bindValidation(){
        $("#editRoleForm").bootstrapValidator({
            message: '输入值无效',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                roleName: {
                    validators: {
                        notEmpty: {
                            message: '请输入角色名称'
                        },
                        callback: {
                            message: "角色名称已存在！",
                            callback: function(value, validator) {
                                var flag = false;
                                $.ajax({
                                    url: 'qx/role/checkQxRoleName',
                                    type: 'POST',
                                    async: false,
                                    data: {
                                        'roleName': $("#editRoleName").val(),
                                        'oid': $("#editOid").val()
                                    },
                                    success: function(res) {
                                        flag = res.valid;
                                    }
                                });
                                return flag;
                            }
                        }
                    }
                }
            }
        });
    }

    // 监听模态框关闭事件，重置验证状态
    $('#editRoleModal').on('hidden.bs.modal', function() {
        var validator = $("#editRoleForm").data('bootstrapValidator');
        if (validator) {
            validator.destroy();
        }
        $("#editRoleForm")[0].reset();
        bindValidation();
    });

    // AJAX错误处理
    $(document).ajaxError(function(event, xhr) {
        if(xhr.status === 403) {
            document.location.href = xhr.getResponseHeader("url");
        } else if(xhr.status !== 200) {
            $("#alertmsg").text("服务器错误，状态码：" + xhr.status);
            $('#alertMsgModal').modal('show');
        }
    });
</script>
</body>
</html>
